<!-- vue的三个模块
<!-- 模板 html -->
<template>
    <!-- 这里有且只能有一个根标签 -->
    <div>
        <!-- 按钮 -->
        <div class="btns">
            <el-button type="primary" size="small" @click="toFormHandler">新增</el-button>
        </div>
        <!-- 表格 -->
        <div class="tab_content">
            <el-table :data="baseprivileges" style="width: 100%" size="small">
                <el-table-column prop="id" label="编号" width="180"> </el-table-column>
                <el-table-column prop="name" label="权限" width="180"> </el-table-column>
                <!-- 操作列 -->
                <el-table-column width="100" align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editHandler(scope.row)">修改</el-button>
                        <el-button type="text" @click="deleteHandler(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<!-- 脚本 js -->
<script>
import { post,del,get } from '@/utils/request'
export default {
    // 定义变量，在模板中直接使用
    // data()是一个方法，这个方法会返回一个对象，这个对象用于定义（返回）在模板中直接使用的变量
    data(){ 
        return {
            baseprivileges:[],
            visible:false
        }
    },
    // 定义事件处理函数（方法）
    methods:{
        // 删除的处理函数
        deleteHandler(row){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            let url = "http://localhost:8888/baseprivilege/deleteById"
            del(url,{id:row.id}).then(resp =>{
                this.$message({type:"success",message:resp.message});
                this.loadBaseprivileges();
                })
            })
        },
        // 修改的处理函数
        editHandler(row){
            this.$router.push({
                path:"/lpa/baseprivilege_form",
                query:row
            })
        },
        // 跳转到添加表单的页面
        toFormHandler(){
            this.$router.push({
                path:"/lpa/baseprivilege_form"
            })
        },
        // 查询所对应对象的数据
        loadBaseprivileges(){
            // let可以理解为var；url为后端服务器地址+接口地址
            let url = "http://localhost:8888/baseprivilege/query"
            // get方法在<script>中import { get } from '@/utils/request'获得
            // get(url)建立连接后，then接通之后，再获得后台数据——js是单线程的
            // resp=>{}箭头函数，是function(response){}的简写
            get(url).then(resp=>{
                // 获得前端请求数据之后做的事情
                // 获取后端数据（后端数据是放在data里面的）：当前实例当中的baseroles（即data()当中的baseprivileges）
                this.baseprivileges = resp.data;
            })
        }
    },
    // 生命周期钩子函数
    created(){
   	 	// loadBaseroles()函数默认不会自动执行，所以我们在这里加载使其执行
        // 做了这一步才能从数据库拿到数据this.baseroles = resp.data
        // 页面加载出来的时候，拿到路由中的参数，放到this.form中
        this.loadBaseprivileges();
    }
}
</script>
<!-- 样式 css -->
<!-- sass：css的一个脚本化语言，能帮我们产生css；scoped：限定范围，写的css只能运用于当期模块 -->
<!-- 在此环境之下，我们写的样式不会影响到其他人的组件 -->
<style lang="sass" scoped>

</style>
